require.config({
    baseUrl:"./",
    paths:{
        jq: "./libs/jquery",
        gg: "./modules/getGoods",
        cr: "./modules/cartRender",
        rl: "./modules/restLocal"
    }

});
// console.log( $("#selectAll"))
require(["jq","gg","cr","rl"],function(_, getGoods, render, resetLocal){

    const url = "http://localhost:3000/api";
    const tbody = $("tbody");
    
    // 1. 获取本地数据
    let goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];

    // 2. 获取服务器数据
    getGoods(url,res=>{
        res = JSON.parse(res).msg;
        // 3. 渲染
        render(goods, res, tbody);

        // 6. 页面渲染完成之后，计算总数量
        $("#cartTotal").html(allNum(goods));
        // 7. 页面渲染完成之后，计算总价
        $("#cartTotal").html(allPrice(goods));
    })

    // 4. 绑定各种事件，开始各种购物车操作
    tbody.on("click", ".del", function(){
        const id = $(this).parent().attr("index");
        $(this).parent().remove();
        // console.log(id)
        // 5-1. 删除操作同步到本地数据
        resetLocal(goods, id, function(i){
            goods.splice(i, 1)
        })

        // 删除之后，计算总数量
        $("#allNum").html(allNum(goods));
        // 删除之后，计算总价
        $("#cartTotal").html(allPrice(goods));

        $("#allCheck")[0].checked = allFlag(goods);
        console.log($("#allCheck")[0])
    })
    
    tbody.on("input", ".setNum", function(){
        const id = $(this).parent().parent().attr("index");
        const num = $(this).val()-0;
        // console.log(id, num)
        // 5-2. 修改操作同步到本地数据
        resetLocal(goods, id, function(i){
            goods[i].num = num
        })

        // 修改之后，计算总数量
        // $("#allNum").html(allNum(goods));
        // 修改之后，计算总价
        $("#cartTotal").html(allPrice(goods));
    })


    // 单个选中事件
    tbody.on("change", ".check", function(){
        const id = $(this).parent().parent().attr("index");
        // checked是复选框DOM元素的原生DOM属性，注意不要转成jq的DOM
        const flag = this.checked;
        resetLocal(goods, id, function(i){
            goods[i].flag = Number(flag)
        })
        // 单个选中修改后，同步到全选
        $("#selectAll")[0].checked = allFlag(goods);
        // 修改之后，计算总数量
        $("#allNum").html(allNum(goods));
    })
    // 初始：单个选中同步到全选
    $("#selectAll")[0].checked = allFlag(goods);

    // 全选事件
    $("#selectAll").change(function(){
        // 全选同步到单个选中，修改本地数据
        goods.forEach(val=>{
            val.flag = Number(this.checked);
        })
        localStorage.setItem("goods", JSON.stringify(goods))
        // 全选同步到单个选中，修改DOM
        for(var i=0;i<$(".check").length;i++){
            $(".check")[i].checked = this.checked;
        }
        // 修改之后，计算总数量
        $("#allNum").html(allNum(goods));
    })
})


function allNum(goods){
    // var sum = 0;
    // for(var i=0;i<goods.length;i++){
    //     sum += goods[i].num;
    // }
    // return sum;
    
    // return goods.reduce((prev, val)=>{
    //     return prev + val.num
    // }, 0)

    return goods.reduce((prev, val)=>{
        return val.flag ? prev + val.num : prev;
    }, 0)
}


// 计算总价
function allPrice(goods){
    return goods.reduce((prev, val)=>{
        return prev + val.num * val.price;
    }, 0)
}

// 判断是否需要全选
function allFlag(goods){
    return goods.every(val=>val.flag)
}
$(".headsBox").load("http://localhost:3000/public/header.html .jj_header")
$(".footsBox").load("http://localhost:3000/public/header.html .jj_foot")

